<template>
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"
      ><strong>{{ todoCount }}</strong> item left</span
    >
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a :class="{selected: condition === 'all'}" href="#/" @click="selectTodo('all')">All</a>
      </li>
      <li>
        <a :class="{selected: condition === 'active'}" href="#/active" @click="selectTodo('active')">Active</a>
      </li>
      <li>
        <a :class="{selected: condition === 'completed'}" href="#/completed" @click="selectTodo('completed')">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" @click="clear">Clear completed</button>
  </footer>
</template>

<script>
// 1. 将父组件的数据传递并接收
// 2. 使用计算属性得到一个数值(数组中isDone属性是false的情况)
export default {
  props: ['todoList','condition'],
  // 计算属性
  computed: {
    todoCount() {
      // 将isDone值是false的元素过滤出来的数组的长度
      return this.todoList.filter((item) => !item.isDone).length
    }
  },
  // 清除已完成事项
  // 1. 按钮绑定事件
  // 2. 子组件不做数据处理,只触发事件,具体实现交给父组件操作
  methods: {
    clear() {
      this.$emit('clear')
    },
    // 只需要将三个按钮的标识符传递过去
    selectTodo(str){
      this.$emit('selectTodo', str)
    }
  }
}
</script>

<style></style>
